<template>
	<div class="box"></div>
	<button class="mybtn" @click="add">操作</button>
	<img src="../../images/1.png" alt="" class="myimg">
	<img src="../../images/1.jpg" alt="" class="myimg">
	<img :src="src" alt="" class="myimg">
	<div class="cdiv" contenteditable="true" @copy="onCopy">这里有一些内容abc</div>
	<div class="cdiv cdiv2" contenteditable="true"></div>
	<div class="container">
		<p>段落1</p>
		<p>段落2</p>
		<p>段落3</p>
	</div>
</template>
<script>
export default {
	data() {
		return {
			src: ''
		}
	},
	methods: {
		async add() {
			const clipboradContents = await navigator.clipboard.read();
			for (let item of clipboradContents) {
				console.log(item);
				for (let type of item.types) {
					if (type === 'text/html') {
						const blob = await item.getType('text/html');
						const pre = document.createElement('pre');
						pre.innerText = await blob.text();
						document.body.appendChild(pre);
					} else if (type === 'image/png') {
						const blob = await item.getType('image/png');
						this.src = URL.createObjectURL(blob);
					} else if (type == 'text/plain') {
						const blob = await item.getType('text/plain');
						const pre = document.createElement('pre');
						pre.innerText = await blob.text();
						document.body.appendChild(pre);
					}
				}
			}
		},
		onCopy(e) {
			console.log(e);
			const selection = document.getSelection();
			e.clipboardData.setData('text/plain', selection.toString().toUpperCase());
			e.preventDefault();
		}
	},
	mounted() {
	}
}
</script>
<style lang="scss">
.cdiv {
	height: 100px;
	border: 1px solid #000;
}
.box {
	width: 100px;
	height: 100px;
	border: 1px solid #000;
}
.myimg {
	width: 100px;
	height: 100px;
	border: 1px solid #000;
}
.container {
	display: flex;
	flex-wrap: wrap;
	&>p {
		flex: 1 1 200px;
		border: 1px solid #000;
		margin: 10px;
	}
}
</style>